<template>
  <view style="padding: 20rpx 0rpx">
    <scroll-view :scroll-x="true">
      <view class="f_row_center">
        <view @click="itemClick(ind)" v-for="(item,ind) in options" :key="ind" class="f_column_center flex_1">
          <view v-html="item.title" :class="[item.isChose?'chose_item':'normal_item']">

          </view>
          <view :style="{ 'visibility': item.isChose?'':'hidden'}" class="line_box"/>
        </view>
      </view>

    </scroll-view>
  </view>

</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from "vue-property-decorator";

@Component({
  components: {}
})
export default class TabBarView  extends Vue {

  @Prop() list?: any;
  @Prop() color?: string;
  @Prop() titleActiveColor?: string;
  @Prop() titleInactiveColor?: string;


  @Watch('list')
  dataChange() {
    // this.options = this.list ?? [];
  }

  created() {
    this.options = this.list ?? []
  }

  options: any = [];

  itemClick(index: any) {
    this.options.forEach((item: any) => {
      item.isChose = false;
    });
    this.options[index].isChose = true;
    this.$emit("onChange", index)
  }

}
</script>

<style scoped>
.chose_item {
  color: #000000;
  font-size: 30rpx;
  text-align: center;
}

.normal_item {
  color: #646464;
  text-align: center;
  font-size: 30rpx;
}

.line_box {
  width: 88rpx;
  height: 6rpx;
  margin-top: 16rpx;
  background: #3072F6;
  border-radius: 6rpx;
}
</style>